<template>
	<view class="shop-page">
		<!-- 搜索框 -->
		<view class="search-content">

			<!-- <image class="search-img" src="../../static/会员卡商城加套餐卡/组合 405.png" mode=""></image> -->
			<input placeholder="搜索您想要的商品" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
			<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
		</view>
		

		<view class="padding10">
			<!-- 商品分类 -->
			
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<!-- 商品展示列表 -->

				<view class="productList flex-wrap-justifyBetween">
					<block v-for="(item,index) in list" :key="index">
						<view class="product" @click="navDetailPage(item)">
							<image class="productImg" :src="item.host_img[0]" mode=""></image>
							<view class="font-overflow2 margin-bottom_10rpx">
								{{item.name}}
							</view>
							
							<!-- 优惠券 -->
							<view >
								<view v-if="item.buying_pattern==1" class="couponLabelOrange  font-overflow">
								
									积分+现金
								</view>
								
								<!-- 1允许积分抵现 2 不允许', -->
								
							</view>
							<!-- 销量 -->
							<view class="flex-between inventory">
								<view class="font-overflow">

									销量 {{item.sales_volume}}
								</view>
								<view class="font-overflow">

									库存 {{item.inventory}}
								</view>
							</view>
							<!-- 价格 -->
							<view class="price">
								<view class="font-overflow">

									￥ {{item.price}}
								</view>

							</view>
						</view>

					</block>
				</view>



			</mescroll-body>
		</view>

	</view>
</template>

<script>
	
	export default {
		components: {
		
		},
		data() {
			return {
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				list: [],
				token: uni.getStorageSync('login').token,
				tabIndex: 1,
				searchVal: '',
				// 轮播图
				list: [],
				
				
				
			}
		},
		onLoad() {

			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.$nextTick(()=>{
				this.mescroll?.resetUpScroll();
			})
			this.init()
			
		},
	
		computed: {
			totelName: function() {
				return function(nums) {
					let num
					if (nums.endsWith(".00")) {
						num = nums.slice(0, -3); // 去除末尾的 ".00"
					}
					if (nums >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						console.log(nums)
						return num?num:nums;
					}
				};
			},
			extractedDate: function() {
				return function(time) {
					console.log(time)
					return time.split(' ')[0];
				};
			}
		},
		methods: {
			
			// 获取轮播图
			async init() {
				


			},
			
			// 轮播图列表
			async upCallback(scroll) {
			
				const result = await this.$http.post({
					url: this.$api.goodsList,
					data: {
						page: scroll.num,
						limit: 10,
						status:1,
						name: this.searchVal
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
			
				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					
					this.list = this.list.concat(result.data.list);
					 // = imgStr1.split(',').map((item) => item.trim());
					this.list.forEach((item)=>{
						item.host_img=item.host_img.split(',').map((item) => item.trim());
					})
					
					console.log('this.list', this.list, this.list.length);
				}
			},
			changeInput(e){
				this.searchVal=e.detail.value
				this.mescroll?.resetUpScroll();
			},
			navDetailPage(items) {
				uni.setStorageSync('shoplDetails',items)
				
				this.$sun.navBack()
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #fff;
	}

	.shop-page {
		background-color: #fff;

		.search-content {
			justify-content: center;
			display: flex;
			align-items: center;
			width: 700rpx;
			height: 88rpx;
			margin: 30rpx;
			background: #f6f6f6;
			border-radius: 84rpx;

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 40rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}
		}
	}

	.padding10 {
		padding: 0 20rpx;

		.productList {
			margin-top: 40rpx;

			.product {
				width: 336rpx;
				margin-bottom: 15rpx;

				.productImg {
					width: 336rpx;
					height: 336rpx;
				}

				.couponLabelRed {
					padding: 0 10rpx;

					max-width: 160rpx;
					height: 45rpx !important;
					line-height: 45rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					height: 38rpx;
					background-color: rgb(255, 238, 238);
					color: rgb(255, 0, 0);
				}

				.couponLabelOrange {
					padding: 0 10rpx;
					
					max-width: 160rpx;
					height: 45rpx !important;
					line-height: 45rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					height: 38rpx;
					background-color: rgb(255, 248, 238);
					color: rgb(255, 149, 0);
				}

				.inventory {
					margin: 10rpx 0;
					font-size: 24rpx;
					font-weight: 400;
					color: rgb(153, 153, 153);
				}

				.price {
					color: rgb(255, 0, 0);
				}
			}
		}

		.productClassification {
			margin-top: 36rpx;

			.avaterIcon {
				width: 102rpx;
				height: 102rpx;
				margin-bottom: 14rpx;
			}
		}
	}
</style>